<template>
  <transition name="fade">
  <div v-show="showFlag" class="order-detail" ref="order-detail">
      <div class="top">
        <i class="el-icon-arrow-left" @click="close" style="z-index:20"></i>
        <div class="title">订单详情</div>
      </div>
      <div class="containt">
        <div class="op-x" :class="[order.state === 1?'state-a':'state']">{{order.state === 1? '已完成':'已关闭'}}</div>
        <div class="shop">
          <div class="content" v-show="isSelf">
            <div style="display: flex;justify-content: space-between; align-items: center">
              <div class="s-name">{{shop.name}}</div>
              <div class="tab_pan">
                <div :class="{active:isSelf}">自提</div>
              </div>
            </div>
            <div class="s-address">{{shop.address}}</div>
            <div class="s-time">营业时间：{{shop.opened_at}}:00 - {{shop.closed_at}}:00</div>
          </div>
        </div>
        <div class="spacing"></div>
        <div class="carts">
          <div class="title">- 商品信息 -</div>
          <div v-for="order in order.order_sub" class="carItem">
            <div class="c-name">{{order.goods_info.name}}</div>
            <div class="price">
              <div>￥{{order.price_discount}}</div>
              <div>x{{order.count}}</div>
            </div>
          </div>
        </div>
        <div class="spacing"></div>
        <div class="op-x">
          <div class="f">
            <div class="l">商品金额</div>
            <div class="r">￥{{order.fee_goods_sum}}</div>
          </div>
          <div class="s">
            <div class="l">实付</div>
            <div class="r"> <span>￥{{order.fee_fact}}</span></div>
          </div>
        </div>
        <div class="spacing"></div>
        <div class="op-x">
          <div class="t">- 订单信息 -</div>
          <div class="f">
            <div class="l">订单编号</div>
            <div class="r">{{order.order_no}}</div>
          </div>
          <div class="s">
            <div class="l">实付</div>
            <div class="r"> <span>￥{{order.fee_fact}}</span></div>
          </div>
        </div>
      </div>
  </div>
  </transition>

</template>

<script>
  export default {
    name: 'detail',
    props: {
      showFlag: {
        type: Boolean,
        default: true
      },
      order: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        shop: this.$store.state.shop,
        isSelf: true
      };
    },
    methods: {
      close() {
        this.$root.eventHub.$emit('o.del.close', event.target);
      }
    }
  };
</script>

<style scoped>
  .order-detail {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #ffffff;
    z-index: 50;
    opacity: 1;
  }

  .fade-enter-active, .fade-leave-active {
    transition: all .5s;
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    left: 1000px;
  }

  .state{
    font-size: 16px !important;
    background: #d9dde1;
    color: #ffffff;
  }
  .state-a{
    font-size: 16px !important;
    background: #35c865;
    color: #ffffff;
  }

  .top {
    display: flex;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid #d4d6d9;
  }

  .top i {
    font-size: 20px;
    font-weight: bolder;
    margin-left: 10px;
  }

  .top .title {
    position: absolute;
    display: flex;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    height: 40px;
    line-height: 40px;
  }

  .shop {
    min-height: 100px;
  }

  .tab_pan {
    display: flex;
  }

  .tab_pan > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 24px;
    border-radius: 50px;
    border: 1px solid #d9dde1;
    font-size: 12px;
    margin-right: 30px;
  }

  .tab_pan > div.active {
    color: #ffffff;
    background: #bfa272;
    border: 1px solid #fff;
  }

  .c-name {
    font-size: 14px;
  }

  .content {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding: 0 0px 10px 20px;
    font-size: 16px;
    color: #07111b;
    margin-top: 20px;
  }

  .content > div {
    margin: 5px 0;
  }

  .content .s-name {
    color: #030307;
    font-size: 15px;
  }

  .content .s-address {
    font-size: 14px;
  }

  .content .s-time {
    font-size: 14px;
  }

  .carts {
    padding: 10px 6px;
    min-height: 120px;
  }

  .carts .title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #2b333b;
  }

  .carItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    color: #4d555d;
    padding: 0 6px;
  }

  .carItem .price {
    display: flex;
    justify-content: space-between;
    min-width: 100px;
  }

  .carItem .price div:nth-child(1) {
    color: #dc0000;
  }

  .op-x{
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    font-size: 14px;
  }

  .op-x >div{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
  }

  .op-x .f{
    border-bottom: 1px solid #d9dde1;
  }

  .op-x .s span{
    color: #d30000;
  }

  .op-x .t{
    justify-content: center !important;
  }
</style>
